// 实现使用函数调用xtx-message组件的逻辑
import XtxMessage from './xtx-message.vue'
import { render } from 'vue'
// import { render, createVNode } from 'vue'

// 准备dom容器 传统方式
// const div = document.createElement('div')
// div.setAttribute('class', 'xtx-message-container')
// document.body.appendChild(div)
// 用render createVNode 实现
const domVnode = <div class="xtx-message-container"></div>
// const domVnode = createVNode('div', { class: 'xtx-message-container' })
// 这是个虚拟dom对象 真实的dom 在render挂载后的虚拟dom对象里的el中
render(domVnode, document.body)
const div = domVnode.el
// 定时器标识 几秒后消失
let timer = null
// 实现：根据xtx-message.vue渲染消息提示
const Message = ({ type, text }) => {
  const comVnode = <XtxMessage {...{ type, text }}></XtxMessage>
  // const comVnode = createVNode(XtxMessage, { type, text })
  render(comVnode, div)
  clearTimeout(timer)
  // 模仿饿了么 2秒后关闭 把null 挂载到容器中清空
  timer = setTimeout(() => {
    render(null, div)
  }, 2000)
}

export default Message
